import { gql, useQuery } from "@apollo/client"
import { useParams, useSearchParams } from "react-router"
import { usePath } from "../../../../../hooks/usePath"
import { QueryTestByIdQuery } from "../../../../admin/test/group/chapter/page"
import { QueryTestGroupByIdResult, QueryTestGroupByIdQuery } from "../../../../admin/test/group/page"
import { QueryTestChapterByIdQuery, QueryTestChapterByIdResult } from "../../../../admin/test/group/chapter/paper/page"
import { BaseFields } from "../../../../../queries/base"
import { TestPaperEntity, TestPaperFields, TestQuestionFields } from "../../../../../queries/test"
import PaperCard from "./PaperCard"

export const QueryTestPaperByIdQuery = gql`
  query QueryTestPaperById($id: Int!, $questions: Boolean) {
    queryTestPaperById(id: $id, questions: $questions) {
      ${BaseFields}
      ${TestPaperFields}
      questions{
        ${BaseFields}
        ${TestQuestionFields}
      }
    }
  }
`
export interface QueryTestPaperByIdResult {
  queryTestPaperById: TestPaperEntity
}
const TestGroupChapterPaperPage = () => {
  const params = useParams()
  const groupId = parseInt(params.groupId || "0")
  const testId = parseInt(params.testId || "0")
  const chapterId = parseInt(params.chapterId || "0")
  const paperId = parseInt(params.paperId || "0")
  const group = useQuery<QueryTestGroupByIdResult>(QueryTestGroupByIdQuery, {
    variables: {
      id: groupId
    }
  })
  const test = useQuery<QueryTestByIdQuery>(QueryTestByIdQuery, {
    variables: {
      id: testId
    }
  })
  const chapter = useQuery<QueryTestChapterByIdResult>(QueryTestChapterByIdQuery, {
    variables: {
      id: chapterId
    }
  })
  const paper = useQuery<QueryTestPaperByIdResult>(QueryTestPaperByIdQuery, {
    variables: {
      id: paperId,
      questions: true
    }
  })
  const dataSource = (paper.data?.queryTestPaperById.questions || [])
  usePath([{
    title: "模拟测试", href: "/test"
  }, {
    href: `/test/${groupId}/group`,
    title: group.data?.queryTestGroupById.name || ""
  }, {
    title: test.data?.queryTestById.name || "",
    href: `/test/${groupId}/group/${testId}/chapter`
  }, {
    title: chapter.data?.queryTestChapterById.name || ""
  }, {
    title: paper.data?.queryTestPaperById.name || "",
  }])
  const [searchParams] = useSearchParams();
  const testType = searchParams.get("testType") || "practice"
  usePath([{ title: "模拟测试", href: "/test" }, { href: `/test/${groupId}/group`, title: group.data?.queryTestGroupById.name || "" }, { title: test.data?.queryTestById.name || "", href: `/test/${groupId}/group/${testId}/chapter` }, { title: chapter.data?.queryTestChapterById.name || "" }, { title: testType === "practice" ? "模拟考试" : "阅读模式", }])

  if (!paper.data) return;
  return <PaperCard
    dataSource={dataSource}
    testType={testType as any}
    paper={paper.data?.queryTestPaperById}
    title={`${test.data?.queryTestById.name}${chapter.data?.queryTestChapterById.name}`}
  />
}
export default TestGroupChapterPaperPage